<template>
  <div class="login">
    <div class="login_bg">
      <div class="register">
        <p>全新升级体验，好货赚不停</p>
        <button @click="downloadAPP()">下载APP</button>
      </div>
      <div class="log_logo">
        <img src="http://gladmin.stc1518.com//static/img/logo.6ad6607.png">
      </div>
      <!-- 验证码登录 -->
      <div class="pd_log">
        <div class="pdlog_one">
          <div class="pdl_top">
            <div class="pdl_side">
              <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/name.png"> 手机号
            </div>
            <div class="pdl_cont">
              <input
                type="number"
                v-model.number="ReginForm.tel"
                placeholder="请输入你的手机号"/>
            </div>
          </div>
          <div class="pdl_top">
            <div class="pdl_side">
              <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/yxz.png"> 验证码
            </div>
            <div class="pdl_conts">
              <input type="text" placeholder="请输入验证码" v-model="verification" class="pdl_conts-input"/>
              <input type="button" class="pdls_btn" v-show="sendAuthCode" @click="getAuthCode"
                     value="获取验证码"/>
              <span v-show="!sendAuthCode" class="pdls_btn">
              <span class="pdls_btn2">{{auth_time}}</span> 秒后发送</span>
            </div>
          </div>
          <div class="pdlog_two">
            <button
              type="success"
              round
              v-on:click="submit"
              @click.native.prevent="submit"
              :loading="logining"
              :disabled="!verification" :class="verification ? 'yf_submitBtn' : 'submitBtn'">
              确定
            </button>
            <p>* 新用户注册立即获得15.8元现金</p>
          </div>
        </div>
      </div>
    </div>
    <div class="register_foot">本链接由ID：{{userId}} 生成</div>
  </div>
</template>

<script>
  import Rule from '../../common/validate.js';
  export default {
    name: "register",
    data () {
      return {
        ReginForm: {tel: '',},
        logining: false,
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */
        auth_time: 0, /*倒计时 计数器*/
        verification:"",//绑定输入验证码框框
        rule: {
          tel: [
            {required: true, message:'请输入电话号码', trigger: 'blur'},
            { validator: Rule.checkNull, trigger: 'blur' },
            { validator: Rule.checkTszf, trigger: 'blur' },
            { validator: Rule.checkCellPhone, trigger: 'blur' }
          ],
        },
        userId:this.$route.query.userId,
      }
    },
    methods: {
      //  验证
      getAuthCode: function () {
        const mobile = this.ReginForm.tel;
        // 获取验证码请求
        const url = '/api/common/v1/sms/pwd?' + 'mobile=' + mobile + '&country_code=86'
        console.log("url", url);
        this.$axios.post(url, {emulateJSON: true}).then(function (response) {
          console.log("请求成功", response)
        }, function (error) {
          console.log(error.response.data);
          console.log("请求失败", error);
        })
        this.sendAuthCode = false;
        //设置倒计时秒
        this.auth_time = 60;
        var auth_timetimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            clearInterval(auth_timetimer);
          }
        }, 1000);
      },
      // 封装注册发送请求方法,验证验证码
      thisAjax(){
        const phoneData =this.ReginForm.tel;
        const mCodeData=this.verification;

        //  手机注册
        //emulateJSON:true设置后post可跨域
        const url = "/api/common/v1/system/sms-login?"+'phone='+phoneData+'&password='+mCodeData+'&type=1';
        this.$axios.post(url,{emulateJSON:true})
          .then(res => {
            this.$message({
              message: '',
              type: 'success'
            });
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            //如果有传值过来的path返回path，否则跳转至个人中心
            this.$router.push({path:'/'})
          },function (error) {
            console.log('错误',error);
          })
      },
      // ...
      submit () {
        this.$refs.ReginForm.validate(valid => {
          if (valid) {
            this.logining = true
            this. thisAjax();
            console.log('开始写入后台数据！')
          } else {
            console.log('submit err')
          }
        })
      },
      reset () {
        this.$refs.ReginForm.resetFields()
      },
      //下载app
      downloadAPP(){
        let ua = navigator.userAgent.toLowerCase();
        //Android终端
        let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
　　   //Ios终端
        let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            window.location = 'https://www.pgyer.com/gBkY'
            //Ios
          } else if (/(Android)/i.test(navigator.userAgent)) {
            //Android终端
            window.location = 'https://www.pgyer.com/shtc'
          }
      },
    },
    created:function () {
      setTitle('推荐注册')
    },
    mounted(){

    }

  }


</script>

<style scoped>
  .login {
    width: 100%;
    background-image: url("https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/login_bg.png");
    background-size: 100% 100%;
    height: 100%;
    min-height: 100vh;
  }
.register{
  height: 0.4rem;
  overflow: hidden;
  background-color: #01bf47;

}
  .register p{float: left;width: 65%;text-align: right;padding-right: 0.1rem;line-height: 0.4rem; color: #fff;}
  .register button{border: 0;background: #f7f7f7;float: left;line-height: 0.26rem;margin-top: 0.07rem;width: 0.7rem;text-align: center;border-radius: 0.05rem}
  .log_logo {
    width: 35%;
    margin: 0 auto;
  }

  .log_logo img {
    width: 100%;
    padding-top: 0.5rem;
  }

  .pdl_top {
    width: 90%;
    margin: 0 auto 0.1rem;
    background-color: rgba(192, 192, 192, 0.5);
    height: 0.4rem;
    overflow: hidden;
  }

  .pdl_side {
    width: 25%;
    padding-left: 0.1rem;
    border-right: 1px solid #efefef;
    float: left;
    color: white;
    font-size: 0.14rem;
    line-height: 0.3rem;
    margin-top: 0.05rem;
  }

  .pd_log {
    padding-top: 0.7rem;
    font-size: 0;
  }

  .pdl_side img {
    width: 0.2rem;
    position: relative;
    top: 0.05rem;
  }

  .pdl_cont input {
    height: 0.4rem;
    width: 100%;
    background-color: hsla(0, 0%, 47%, .1);;
    outline: none;
    border: 0;
    font-size: 0.14rem;
    position: relative;
    top: 0;
    left: 0.1rem;
    color: white;
  }

  .pdl_cont input::-webkit-input-placeholder {
    color: #FFF;
    font-size: 0.14rem;
  }

  .ic_name {
    width: 0.5rem;
    position: relative;
    top: 0.1rem;
  }

  .pdl_cont {
    width: 65%;
    float: left;
  }

  .pdl_conts {
    width: 73%;
    float: left
  }

  .pdl_conts-input {
    height: 0.4rem;
    width: 55%;
    background-color: hsla(0, 0%, 47%, .1);
    outline: none;
    border: 0;
    font-size: 0.14rem;
    margin-left: 0.1rem;
    color: white;
  }

  .pdl_conts-input::-webkit-input-placeholder {
    color: #FFF;
    font-size: 0.14rem;
  }

  .pdls_btn {
    background: #01bf47;
    border: 1px solid #01bf47;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.12rem;
    padding: 0.05rem 0.1rem;
  }

  .pdlog_two {
    width: 90%;
    margin: 0 auto;
  }
  .pdlog_two p{font-size: 0.14rem;color: #fff;padding-top: 0.1rem;}

.register_foot{position: fixed;bottom: 0.2rem;color: #808080;text-align: center;width: 100%;}
  .yf_submitBtn {
    background: #01bf47;
    border: 1px solid #01bf47;
    color: #fff;
    font-size: 0.14rem;
    width: 100%;
    padding: 0.1rem 0;
    border-radius: 0.05rem;
    outline: none;
  }
  .submitBtn {
    background: rgba(216, 216, 216, 0.4);
    border: 0;
    color: #fff;
    font-size: 0.14rem;
    width: 100%;
    padding: 0.1rem 0;
    border-radius: 0.05rem;
    outline: none;
  }
</style>
